<template>
  <div id="info">
    <div class="search-container">
      <el-form inline class="search-form">
        <el-form-item label="输入分类名称：">
          <el-input
            v-model="searchName"
            placeholder="请输入分类名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="选择商品类别">
          <el-select v-model="searchType" placeholder="请选择分类级别">
            <el-option label="全部" value="0"></el-option>
            <el-option label="一级分类" value="1"></el-option>
            <el-option label="二级分类" value="2"></el-option>
            <el-option label="三级分类" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchInfo(searchType, searchName, 1, 5)">
            查找
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      v-if="!isHide"
      :data="pageInfo.list"
      style="width: 100%; margin-top: 20px"
      border
    >
      <!-- 添加序号列 -->
      <el-table-column
        label="序号"
        width="60"
        align="center"
      >
        <template slot-scope="scope">
          {{ (pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        prop="name"
        label="分类名称"
        width="180"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="分类级别"
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.type === 1 ? '一级分类' : scope.row.type === 2 ? '二级分类' : scope.row.type === 3 ? '三级分类' : '未知分类' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="parentName"
        label="父级分类"
        width="180"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" class="delete" @click="deleteCategory(scope.row.id)">
            删除
          </el-button>
          <el-button type="text" class="update" @click="updateCategory(scope.row.id)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="isHide" class="noData">
      <el-empty description="暂无数据"></el-empty>
    </div>

    <el-pagination 
      v-if="!isHide"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      style="margin-top: 20px; margin-right: 150px; text-align: right"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  el: "#info",
  data() {
    return {
      searchName: "",
      searchType: "0",
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        list: []
      },
      isHide: true,
    };
  },
  methods: {
    searchInfo(searchType, searchName, pageNum, pageSize) {
      this.$axios({
        method: "post",
        url: "/api/category/page",
        data: {
          pageNum,
          pageSize,
          searchName,
          searchType,
        },
      })
        .then((rs) => {
          this.pageInfo = rs.data.pageInfo;
          this.isHide = this.pageInfo.list.length === 0;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleSizeChange(newSize) {
      this.searchInfo(this.searchType, this.searchName, 1, newSize);
    },
    handleCurrentChange(newPage) {
      this.searchInfo(this.searchType, this.searchName, newPage, this.pageInfo.pageSize);
    },
    deleteCategory(id) {
      if (!confirm("是否确认删除")) {
        return false;
      }
      this.$axios({
        method: "post",
        url: "/api/category/deleteCategory",
        data: {
          id,
        },
      })
        .then((rs) => {
          this.$message({
            message: rs.data.result,
            type: rs.data.result === "删除成功" ? "success" : "error",
          });
          if (rs.data.result === "删除成功") {
            // 删除成功后回到第一页
            this.searchInfo(this.searchType, this.searchName, 1, this.pageInfo.pageSize);
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    updateCategory(val) {
      this.$router.push({ name: "updateCategory", query: { id: val } });
    },
  },
  mounted() {
    this.searchInfo(this.searchType, this.searchName, 1, 5);
  },
};
</script>

<style scoped>
.mem_tit {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 50px;
}

.noData {
  text-align: center;
  font-size: 18px;
  color: #6c757d;
  margin-top: 20px;
}
</style>